<template>
	<div style="height:100%">
		<div class="title">
			<div>
				<span>艾丝领域</span>
				<span class="phone-png"><img src="../../assets/home/phone.png"></span>
			</div>
		</div>
		<div class="home-main">
			<div class="search">
				<van-search 
				v-model="value" 
				placeholder="搜索你感兴趣的课程"
				show-action="true" 
				background="#f0f0f0"
				/>
			</div>
			<div class="notice">
				<div class="notice-img">
					图片
				</div>
				<div class="notice-more">
					<van-row>
					  <van-col span="20">
					  	<div align="left" class="notice-more-text">通知 在线客服更换 点击公告添加新客服</div>
					  </van-col>
					  <van-col span="4">
					  	<div align="right" class="recommend-title-more">更多</div>
					  </van-col>
					</van-row>
				</div>
			</div>
			<div class="recommend" >
				<div class="head-title">
					<van-row>
					  <van-col span="12">
					  	<div align="left" class="head-title-left">热门推荐</div>
					  </van-col>
					  <van-col span="12">
					  	<div align="right"  class="head-title-right">更多</div>
					  </van-col>
					</van-row>
				</div>
				<div class="recommend-info" >
					<van-row >
					  <van-col span="12">
					  	<div class="recommend-info-img">
					  		<div style="height:100%;background-color:#f0f0f0;border-radius: 6px;">
					  			图片
					  		</div>
					  		<div class="recommend-info-img-tips">
					  			124326 人已学习
					  		</div>
					  	</div>
					  	<div class="recommend-info-title" align="left">
					  		小甜豆合集目录 会员可打包下 载备份 2
					  	</div>
					  	<div class="recommend-info-amount">
					  		<span>￥99999</span>
					  		<span> | </span>
					  		<span>1节</span>
					  	</div>
					  </van-col>
					  <van-col span="12">
					  	<div class="recommend-info-img">
					  		<div style="height:100%;background-color:#f0f0f0;border-radius: 6px;">
					  			图片
					  		</div>
					  		<div class="recommend-info-img-tips">
					  			124326 人已学习
					  		</div>
					  	</div>
					  	<div class="recommend-info-title" align="left">
					  		小甜豆合集目录 会员可打包下 载备份 2
					  	</div>
					  	<div class="recommend-info-amount">
					  		<span>￥99999</span>
					  		<span> | </span>
					  		<span>1节</span>
					  	</div>
					  </van-col>
					</van-row>
				</div>
			</div>
			<div class="new-update" >
				<div class="head-title">
					<van-row>
					  <van-col span="12">
					  	<div align="left" class="head-title-left">最新更新</div>
					  </van-col>
					  <van-col span="12">
					  	<div align="right" class="head-title-right" @click="clikc">更多</div>
					  </van-col>
					</van-row>
				</div>
				<div class="new-update-info">
					<div 
					class="new-update-info-detail" 
					@click="onDetail" 
					v-for="(item,index) of list" 
					:key="index">
						<van-row>
						  <van-col span="12">
						  	<div class="new-update-info-left">
						  		<div style="height:6rem;background-color:#f0f0f0;border-radius: 6px;">图片</div>
						  		<div class="new-update-info-img-tips"></div>
						  	</div>
						  </van-col>
						  <van-col span="12">
						  		<div class="new-update-info-right">
						  			<div class="new-update-info-right-title">
							  			<div>234 摄影资料 （照片+视频）</div>
							  			<div>购买观看完整版</div>
							  		</div>
							  		<div class="new-update-info-right-amount">
							  			<van-row>
							  				<van-col span="18">
							  					16小时前更新
							  				</van-col>
							  				<van-col span="6">
							  					¥8.9
							  				</van-col>
							  			</van-row>
							  		</div>
						  		</div>
						  </van-col>
						</van-row>
					</div>	

				</div>
			</div>	
		</div>
	</div>
</template>



<style scoped>
	.van-search{
		padding: 0px;

	}
	.title{
		background-color: #F16E6E;
		padding: 10px 0px;
		/*font-size: 36px;*/
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFF;
		position: relative;
		height: 2%;
	}
	.home-main{
		padding:0px 10px;	
		padding-bottom: 1rem;
	}
	.phone-png{
		position: absolute;
		top:12px;
		right: 20px;
	}
	.phone-png img{
		width: 18px;
		height: 18px;
	}
	.search-cancel{
		float:right;
	}

	.search{
		padding:10px 0px;
	}

	.notice-img{
		height: 7rem;
		background: #E7E7E7;
		border-radius: 6px;
	}
	.notice-more{
		margin-top: 26px;
		font-size: 14px;
		padding: 0px 10px;
	}
	.notice-more-text{
		background-image: url('../../assets/home/notice.png');
		background-repeat: no-repeat;
		background-size: 18px;
		padding-left: 25px;
		color: #A2A2A2;
	}

	.notice{
		background-color: #FFF;
		border-radius: 6px;
		height: 22%;
		padding-bottom: 20px;
	}
	.notice-title{
		font-weight: 400;
		color: #A2A2A2;
		position: relative;
		bottom: 6px;
	}
	.notice-right-btn{
		font-weight: 400;
		color: #333333;
		position: relative;
		bottom: 6px;
		font-family: PingFangSC-Regular, PingFang SC;
		float: right;

	}
	.notice-right-btn-img{
		margin-left: 10px;
		position: relative;
		top:2px;
		width: 8px !important;

	}
	.recommend{
		margin-top: 10px;
		background-color: #fff;
		border-radius: 6px;
		padding:0px 10px;
	}
	.recommend-title{
		padding-top: 10px;
	}

	.recommend-title-text,.head-title .head-title-left{
		background-image: url('../../assets/home/recommend.png');
		background-repeat: no-repeat;
		background-size: 18px;
		background-position: left center;

		padding-left: 25px;
		font-weight: 600;
		color: #F16E6E;
		font-size: 22px;
	}
	.recommend-title-more,.head-title .head-title-right{
		background-image: url('../../assets/home/right.png');
		background-repeat: no-repeat;
		background-size: 10px;
		background-position: right;
		padding-right: 20px;
	}
	.head-title {
		padding:10px;
	}
	.head-title-right{
		margin-top: 5px;
	}

	.recommend-info-img{
		height: 5rem;
		position: relative;
	}
	.recommend-info-img-tips{
		position: absolute;
		bottom: 10px;
		right: 10px;
		font-size: 10px;
		color: #FFF;
		background: #000000;
		border-radius: 5px;
		opacity: 0.32;
		padding: 4px;
	}
	.recommend-info,.recommend-info .van-row,.recommend-info .van-col{
		height: 80%;

	}
	.recommend-info-amount{
		margin-top:5%;
		text-align: left;
	}
	.recommend-info-amount span{
		color: #A2A2A2;
	}
	.recommend-info-amount span:nth-child(1){
		color:red;
		font-weight: 600;
	}
	.recommend-info .van-row .van-col:nth-child(1) {
		padding-right: 10px;
	}
	.recommend-info .van-row .van-col:nth-child(2) {
		padding-left: 10px;
	}
	.new-update{
		margin-top: 10px;
		background-color: #fff;
		border-radius: 6px;
		padding:0px 10px;
	}
	.new-update-info{
		text-align: left;
		margin-bottom: 20px;
	}
	.new-update-info-right{
		position: relative;
		height: 6rem;
	}
	.new-update-info-right-title div{
		margin-bottom: 7px;
	}

	.new-update-info-right-title div:nth-child(1){
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		font-weight: 600;
		
	}
	.new-update-info-left{
		margin-right: 10px;
	}
	.new-update-info-right-amount{
		position: absolute;
		bottom: 10px;
		width: 100%;

	}
	.new-update-info-detail{
		padding-bottom: 10px;
	}

</style>


<script setup>
	import { ref } from 'vue';
 	import { Search,Col, Row } from 'vant'; 
 	import { useRouter } from 'vue-router'

	const router = useRouter()
 	const onDetail = () => {
		router.push({path:'/detail',query:{id:'ccc'}})
 	}
 	const list =[]
 	for( var i = 0;i<5;i++){
 		list.push(i)
 	}

</script>